<template>
  <div class="dashboard">
    <el-row :gutter="10" class="card-top">
      <el-col :span="7">
        <EchartsCard title="分类商品数量(饼图)"
          ><pieEcharts :pieData="categoryGoodsCount"
        /></EchartsCard>
      </el-col>
      <el-col :span="10">
        <EchartsCard title="不同城市商品销量"
          ><mapEcharts :mapData="addressGoodsSale"
        /></EchartsCard>
      </el-col>
      <el-col :span="7">
        <EchartsCard title="分类商品数量(玫瑰图)"
          ><roseEcharts :roseData="categoryGoodsCount"
        /></EchartsCard>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="card-bottom">
      <el-col :span="12">
        <EchartsCard title="分类商品的销量"
          ><lineEcharts v-bind="categoryGoodsSale"
        /></EchartsCard>
      </el-col>
      <el-col :span="12">
        <EchartsCard title="分类商品的收藏"
          ><barEcharts v-bind="categoryGoodsFavor"
        /></EchartsCard>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import EchartsCard from '@/base-ui/echartsCard'
import {
  pieEcharts,
  barEcharts,
  lineEcharts,
  mapEcharts,
  roseEcharts
} from '@/components/page-echarts'
import { computed } from 'vue'
import { useStore } from 'vuex'

const store = useStore()
// 请求获取数据
store.dispatch('dashboard/getDashboardDataAction')
// 修改数据格式
const categoryGoodsCount = computed(() => {
  return store.state.dashboard.categoryGoodsCount.map((item: any) => {
    return { name: item.name, value: item.goodsCount }
  })
})
const categoryGoodsSale = computed(() => {
  const xLabels: string[] = []
  const values: any[] = []
  const categoryGoodsSale = store.state.dashboard.categoryGoodsSale
  for (const item of categoryGoodsSale) {
    xLabels.push(item.name)
    values.push(item.goodsCount)
  }
  return { xLabels, values }
})
const categoryGoodsFavor = computed(() => {
  const xLabels: string[] = []
  const values: any[] = []
  const categoryGoodsFavor = store.state.dashboard.categoryGoodsFavor
  for (const item of categoryGoodsFavor) {
    xLabels.push(item.name)
    values.push(item.goodsFavor)
  }
  return { xLabels, values }
})
const addressGoodsSale = computed(() => {
  return store.state.dashboard.addressGoodsSale.map((item: any) => {
    return { name: item.address, value: item.count }
  })
})
</script>

<style scoped lang="less">
.dashboard {
  height: 100%;
  .card-top {
    height: 50%;
  }
  .card-bottom {
    height: 50%;
    margin-top: 10px;
  }
}
</style>
